import React, { useState } from 'react';
import './MyPage.scss';

// 定义标签类型
type TabType = 'all' | 'works' | 'uploads' | 'recent' | 'favorites' | 'drafts' | 'trash' | 'shares';

/**
 * 我的空间页面组件 - 横向标签布局
 */
const MySpacePage: React.FC = () => {
  // 当前选中的标签状态
  const [activeTab, setActiveTab] = useState<TabType>('all');

  /**
   * 渲染内容区域
   * 根据当前选中的标签显示不同的内容
   */
  const renderContent = () => {
    switch (activeTab) {
      case 'all':
      case 'works':
      case 'uploads':
        return (
          <>
            {/* 筛选栏 */}
            <div className="myspace-content__filters">
              <div className="myspace-content__filter">
                <span className="myspace-content__filter-label">○ 颜色</span>
                <span className="myspace-content__filter-arrow">▼</span>
              </div>
              <div className="myspace-content__filter">
                <span className="myspace-content__filter-label">类别</span>
                <span className="myspace-content__filter-arrow">▼</span>
              </div>
              <div className="myspace-content__filter">
                <span className="myspace-content__filter-label">类型</span>
                <span className="myspace-content__filter-arrow">▼</span>
              </div>
              <div className="myspace-content__filter">
                <span className="myspace-content__filter-label">标签</span>
                <span className="myspace-content__filter-arrow">▼</span>
              </div>
              <div className="myspace-content__filter">
                <span className="myspace-content__filter-label">添加时间</span>
                <span className="myspace-content__filter-arrow">▼</span>
              </div>
              <div className="myspace-content__filter">
                <span className="myspace-content__filter-label">显示子文件夹内容</span>
              </div>
            </div>

            {/* 上传区域 */}
            <div className="myspace-content__upload-area">
              <div className="myspace-content__upload-hint">
                <p>拖放文件到这里，开始云端作图</p>
                <p>点击上传文件，支持上传本页文件</p>
              </div>
              <div className="myspace-content__upload-btns">
                <button className="myspace-content__upload-btn">上传文件</button>
                <button className="myspace-content__import-btn">从 [确定] 导入</button>
              </div>
            </div>
          </>
        );
      case 'recent':
        return <div className="myspace-content__empty">最近打开的内容将显示在这里</div>;
      case 'favorites':
        return <div className="myspace-content__empty">收藏夹内容将显示在这里</div>;
      case 'drafts':
        return <div className="myspace-content__empty">草稿箱内容将显示在这里</div>;
      case 'trash':
        return <div className="myspace-content__empty">回收站内容将显示在这里</div>;
      case 'shares':
        return <div className="myspace-content__empty">分享管理内容将显示在这里</div>;
      default:
        return null;
    }
  };

  return (
    <div className="myspace-container">
      {/* 横向标签导航栏 */}
      <div className="myspace-tabs">
        <div
          className={`myspace-tabs__item ${activeTab === 'all' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('all')}
        >
          全部(0)
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'works' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('works')}
        >
          作品
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'uploads' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('uploads')}
        >
          我上传的
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'recent' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('recent')}
        >
          最近打开
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'favorites' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('favorites')}
        >
          收藏夹
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'drafts' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('drafts')}
        >
          草稿箱
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'trash' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('trash')}
        >
          回收站
        </div>
        <div
          className={`myspace-tabs__item ${activeTab === 'shares' ? 'myspace-tabs__item--active' : ''}`}
          onClick={() => setActiveTab('shares')}
        >
          分享管理
        </div>
        <button className="myspace-tabs__add-btn">+ 添加</button>
      </div>

      {/* 内容区域 - 根据选中标签显示不同内容 */}
      <div className="myspace-content">{renderContent()}</div>
    </div>
  );
};

export default MySpacePage;